<template>
    <div class="search-bar">
        <el-form ref="ruleFormRef" :model="queryParams" :inline="true">
            <el-form-item prop="name" label="关键字">
                <el-input v-model="queryParams.name" placeholder="角色名称" clearable @keyup.enter="handleQuery" />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="handleQuery">搜索</el-button>
                <el-button  @click="handleResetQuery(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
    </div>

    <el-card v-loading="loading" :shadow="'never'">

        <div class="mb-10px">
            <el-button type="primary" @click="openAddDialog">新增</el-button>
            <el-button :disabled="selectIds.length<=0" type="danger" @click="handleDel" >删除</el-button>
        </div>

        <slot name="table">

        </slot>

    </el-card>

    <pagination v-show="total>0" :total="total" v-model:page="queryParams.page"
          v-model:limit="queryParams.pageSize" @pagination="changePagination" />

</template>

<script setup lang='ts' name="QueryRole">
import { FormInstance } from 'element-plus';
import {QueryParamsRoleInter} from "@/types/rbac";
import useRole from "@/hooks/rbac/useRole";
const {del,loading,responseResult} = useRole()
const props = defineProps<{
    total:number,
    selectIds:number[]
}>()
const emit = defineEmits(['send-query','send-open-add-dialog']);
const ruleFormRef = ref<FormInstance>()
const { total,selectIds } = toRefs(props);
let queryParams = ref<QueryParamsRoleInter>({
    name: '',
    page: 1,
    pageSize: 50
})

function changePagination(p: { page:number,limit:number }) {
    queryParams.value.page = p.page
    queryParams.value.pageSize = p.limit
    handleQuery()
}


function handleDel() {
    ElMessageBox.confirm("您确定要删除吗？").then(()=>{
        del(selectIds.value)
        handleQuery()
    })


}

function handleResetQuery(formEl: FormInstance | undefined) {
    if(!formEl){
        return
    }
    formEl.resetFields()
    handleQuery()
}

function handleQuery() {
    emit('send-query', queryParams.value);
}

function openAddDialog(){
    emit('send-open-add-dialog')
}

</script>

<style>


</style>
